<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body class="df fdc ">
    
    <!-- //轮播图区 -->
   <header class="head">
    
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../../assets/imgs/index-swiper-bg1.jpg" alt="" class="img1"></div>
        <div class="swiper-slide"><img src="../../assets/imgs/index-swiper-bg2.jpg" alt="" class="img1"></div>
        <div class="swiper-slide"><img src="../../assets/imgs/index-swiper-bg3.jpg" alt="" class="img1"></div>

      </div>
      <div class="swiper-pagination"></div>
    </div>
    </div>

    
   </header>
   <!-- 主体内容区 -->
   <main class="main">
    <!-- //今日排名和累计打卡 -->
    <div class="dv1">
      <!-- 今日排名 -->
      <div class="rank">
        <span class="rk">今日排名</span>
        <span class="day" >9</span>
        <img src="../../assets/imgs/index-card-rank.png" >
      </div>
      <!-- 累计打卡23天 -->
      <div class="punchCard">
        <span class="accumlate">累计打卡 <span id="clockDay"></span>天</span>
        <span id="nowcard" class="nowcard">今日打卡</span>
        <img src="../../assets/imgs/index-card-sum.png" >
      
      </div>
    </div>
    <div class="dv2">
      <div class="rundata">
        <div class="rundatatxt">运动数据</div>
      </div>
      <div class="badge">
        <div class="badgetxt">累计运动徽章</div>
        <div class="munber"></div>
        <div class="mei">枚</div>
        <img src="../../assets/imgs/index-card-badge.png" alt="">
      </div>

    </div>
    <!-- 课程训练 -->
    <div class="dv3">
      <div class="course">
        课程训练
      </div>
      <!-- 户外跑步 -->
    </div>
    <div class="dv4">
      <div class="run">
        户外跑步
      </div>
    
    </div>
  

   </main>

   <!-- 底部tabar -->
   <!-- <footer class="foot"> -->
    <!-- <a href="#" class="active">
      <span class="iconfont icon-shouye "></span>
      <p class="">首页</p>
    </a>
    <a href="#" class="">
      <span class="iconfont icon-aixin"></span>
      <p>运动</p>
    </a>
    <a href="#">
      <span class="iconfont icon-wode-"></span>
      <p>圈子</p>
    </a>
    <a href="#">
      <span class="iconfont icon-quanzi"></span>
      <p>我的</p>
    </a> -->

   <!-- </footer> -->

  </body>
</html>
